<template>
  <div class="login" v-title="title">
    <login-close></login-close>
    <form class="login-form">
      <p class="login-title">{{title}}</p>
      <phone v-on:listenToPhone="showMessFromChild"></phone>
      <capt-sms v-on:listenToSmsCode="showMessFromChild" :type="'2'"></capt-sms>
      <div class="item argument-item">
        <label class="argument" @click="isChecked">
          <i class="iconfont icon-duoxuan_xuanzhong_shixin" id="y"></i>
          <i class="iconfont icon-duoxuan_moren" id="n"></i>
          <input type="checkbox" checked id="agree">注册即代表同意
        </label>
        <a class="argumentItem font1" @click="isAgree">《用户服务协议》</a>
      </div>
      <div class="item" ><p class="form-btn btn3" v-if="isCheck" @click="submit">立即绑定</p><p class="form-btn form-btn-enable" v-else>立即绑定</p></div>
      <p class="btn-under font1" @click="goToTarget('login')">返回登录</p>
    </form>
    <z-modal :msgs="msg"></z-modal>
  </div>
</template>
<script type="text/ecmascript-6">
  import phone from '../../component/login/phoneIpt.vue'
  import captSms from '../../component/login/captSms.vue'
  import loginClose from '../../component/login/close.vue'
  import {loginService} from '../../service/loginService'
  import {commonService} from '../../service/commonService'

  export default { /*#bbbbbb*/
    props: [],
    components: {"phone": phone, 'capt-sms': captSms, 'login-close': loginClose },
    data () {
      this.$store.state.loginStore.smsType = 5;
      return {
        title:'绑定手机号',
        msg: {type: 0 },
        agreeMe: '',
        phoneNo: '',
        kaptchaValue: '',
        smsValue: '',
        platform: 'WXH5',
        thirdInfo: '',
        isCheck: true
      }
    },
    mounted: function () {
      let that = this
      that.platform = loginService.getPlatForm();
      that.$store.state.loginStore.platform = that.platform;
    },
    methods: {
      submit () { //表单提交的方法
        let that = this;
        let mess = '';
        // 赋值区域 Begin
        that.phoneNo =that.$store.state.loginStore.phoneNo; //手机号
        that.kaptchaValue =that.$store.state.loginStore.kaptchaValue; //图片验证码
        that.smsValue =that.$store.state.loginStore.messValidate; // 短信验证码
        // 赋值区域 end
        //mess = that.formValidate(1, 1, 1, 0); //浅显验证
        mess = loginService.formValidate(1, 0, 1, 0,{phoneNo: that.phoneNo, kaptchaValue: that.kaptchaValue, smsValue: that.smsValue});
        if(typeof mess != 'undefined') {
          if(mess.trim('').length > 0){
            that.pop(mess);
            return false;
          }
        }
        else{
          that.thirdInfo = that.$store.state.loginStore.thirdInfo
          //that.thirdInfo = 'thirdInfo:16e6c7cb954545dd8789a7ca38f3a7da'
          loginService.bindPhone({platfrom: that.platform, infoKey: that.thirdInfo, phone: that.phoneNo, smsCode: that.smsValue, type: 2}).then(function (res) {
            if(res.data.success){
              localStorage.token = res.data.datas;
              let JWT = res.data.datas.split('.');
              let info = JWT[1];
                loginService.packageUserInfo(info);
              // 清空倒计时
              if(that.$store.state.loginStore.timer > 0){
                clearInterval(that.$store.state.loginStore.timer)
              }
              that.goToTarget('');//跳转到来的页面验证码过期，请重新输入
            }else{
              // 服务端返回的验证
//              console.log('失败', res.data.code)
//              if(res.data.code === 512104) {
                 that.pop(res.data.message);
              //}
            }
          });
        }
      },
      isAgree () {
        let that = this
        that.agreeMe = {
          text: 'aa',
          type: 1
        };
      },
      isChecked () {
        let that = this;
        let ipt = document.getElementById('agree');
        if(ipt.checked){
          that.isCheck = true;
          document.getElementById('y').style.display = 'block';
          document.getElementById('n').style.display = 'none';
        }else {
          that.isCheck = false;
          document.getElementById('y').style.display = 'none';
          document.getElementById('n').style.display = 'block';
        }
      },
      showMessFromChild (data) {
        let that = this;
        if(data.length > 0){
          that.pop(data); // 弹框
        }
      },
      pop (mess) { //弹框的方法
        let that = this
          commonService.autoCloseModal(that, mess, 1);
      },
      goToTarget (path) { //返回登录
        let that = this
        if(typeof path != 'undefined' && path.trim().length > 0){
          this.$router.replace({name: path})
        }
        else{
            if(that.$store.state.redirect_uri && that.$store.state.redirect_uri.name){
                let name = that.$store.state.redirect_uri.name, params = that.$store.state.redirect_uri.params;
                that.$router.replace({name: name, params: params})
                that.$store.state.redirect_uri = {}
            }else if(localStorage.redirectUrl && localStorage.redirectUrl!="undefined"){
                let url = localStorage.redirectUrl
                localStorage.removeItem('redirectUrl')
                window.location.href = url
            }else{
                that.$router.replace({name: 'home'})
            }
        }
      }
    }
  }
</script>
<style lang="less">
  @import url('../../assets/css/login.less');
</style>